<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    {% load staticfiles %}
    <!--引入JQuery-->
    <script type="text/javascript" src="{% static 'website/jquery-easyui/jquery-3.2.1.min.js' %}"></script> 
    <script type="text/javascript" src="{% static 'website/jquery-easyui/jquery.easyui.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'website/jquery-easyui/jquery.min.js' %}"></script> 
    <script type="text/javascript" src="{% static 'website/js/common.js' %}"></script>  
    <script type="text/javascript" src="{% static 'website/jquery-easyui/locale/easyui-lang-zh_CN.js' %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static  'website/jquery-easyui/themes/default/easyui.css' %}">    
    <link rel="stylesheet" type="text/css" href="{% static 'website/jquery-easyui/themes/icon.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'website/jquery-easyui/demo/demo.css' %}">
    <script>
        var projectID = undefined;  //全局变量，存储获取的项目ID ，用于展示节点树
        $(document).ready(function() {

            // 初始化项目combobox下拉列表
            getProjects('TestProject').then(function(jsonData) { 
                if (jsonData['result'] == 'success') {
                    $('#projects').combobox('loadData', jsonData['data']);
                } else {
                    $.messager.alert('错误信息', '获取项目失败：' + jsonData['data'], 'error');                 
                }
            });



            var id_of_settimeout = undefined; // 用于存储setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。
             
            getProjectChosen('SprintTree').then(function(jsonData) { 
                if (jsonData['result'] == 'success') {
                    // 初始化项目combobox的值，并获取项目ID
                    $('#projects').combobox('setValue', jsonData['data']['projectName']);
                    projectID = jsonData['data']['id']

                    // 请求迭代树
                    $('#tree').tree({
                        url:'nodeTree?treeType=SprintTree&projectID=' + projectID,
                        onClick: function(node){
                            var rootNodeId =  $(this).tree('getRoot', node.target).id
                            if (node.id != rootNodeId) {  // 非根节点
                                var father_node = $(this).tree('getParent', node.target); // 获取父节点
                                if (node.text != '任务概况' && node.text != '任务明细') {
                                    return;
                                }
                                
                                // 取消上次延时未执行的方法
                                clearTimeout(id_of_settimeout);
                                
                                //执行延时
                                id_of_settimeout = setTimeout(function(){
                                    if ($(this).tree('isLeaf', node.target)) { //如果为叶节点，即无子节点，则打开页面
                                        addTab(node.text, father_node.id);
                                    }
                                }, 300);
                                                       
                            }
                        },
                        onDblClick: function(node){
                            // 取消上次延时未执行的方法
                            clearTimeout(id_of_settimeout);
                            nodetext = node.text; // 保存更改之前的节点名称
                            $(this).tree('beginEdit', node.target);
                            
                        },
                        onAfterEdit: function(node){
                            if (node.text != '') {
                                $.post('/action/updateTreeNodeName',
                                    {
                                        nodeID:node.id, 
                                        nodeText:node.text,
                                        treeType:'SprintTree'
                                    },
                                    function(data,status){
                                       if (data == 'success') {
                                            $.messager.alert('提示','保存成功', 'info');
                                        } else {
                                            $.messager.alert('提示', '保存失败: ' + data, 'info');
                                        }        
                                    }
                                ); 
                            } else {
                                $.messager.alert('提示','保存失败，节点名称不能为空', 'info');
                                // 还原节点名称
                                $(this).tree('update', {target: node.target, text: nodetext});
                            }
                        },
                        onContextMenu:function(e, node){
                            treeNodeSelected = node; //定义全局变量,存储目标节点
                            e.preventDefault(); // 通知 Web 浏览器不要执行与事件关联的默认动作
                            $('#treeNodeMenu').menu('show', {
                                left: e.pageX,
                                top: e.pageY
                            });
                        }
                    });
                } else {
                    $.messager.alert('错误信息', '获取项目失败：' + jsonData['data'], 'error');
                }              
            });         
        });   


        // 增加|删除节点
        function treeNodeMenuHandler(item){
            if (item.text == '添加') { //添加子节点            
               $.post('/action/appendTreeNode', {
                    nodeParentID:treeNodeSelected.id,
                    nodeText: 'nodename',
                    state: 'open',
                    iconCls: '',
                    attributes: '',
                    treeType: 'SprintTree',
                    projectID: projectID
                },
                function(data, status){
                    if (data == 'success') {
                        $.messager.alert('提示','添加成功', 'info');
                        $('#tree').tree({url:'nodeTree?treeType=SprintTree&projectID=' + projectID});
                    } else {
                        $.messager.alert('错误', '添加失败' + data, 'error');
                    }        
                });
            } else if (item.text == '删除') {
                var rootNodeId =  $('#tree').tree('getRoot', treeNodeSelected.target).id
                if (treeNodeSelected.id == rootNodeId) { //根目录不允许删除
                    $.messager.alert('告警','根目录不允许删除', 'warning');   
                    return;
                }
                $.messager.confirm('确认','确定删除'+treeNodeSelected.text+'任务吗？',function(r){
                    if(r){
                        $.post('/action/removeTreeNode', {
                                nodeID:treeNodeSelected.id,
                                parentID:treeNodeSelected.parent_id,
                                projectID: treeNodeSelected.project_id,
                                order:treeNodeSelected.order,
                                treeType:'SprintTree'
                            },
                            function(data, status) {
                                if (data == 'success') {
                                    $.messager.alert('提示', '删除成功', 'info');
                                    $('#tree').tree('remove', treeNodeSelected.target);

                                } else {
                                    $.messager.alert('错误', '删除失败', 'error');
                                }
                            }
                        );                    
                    }
                }); 
            }
        }


        // 点击页面树，叶节点，打开对应tab页的函数实现
        function addTab(title, nodeID){
            var url;
            if (title == '任务概况') {
                url  = '/pages/testTaskOverview';
            } else if (title == '任务明细'){
                url = '/pages/testTaskDetail';
            }
  
            if($('#tabs').tabs('exists', title)){  // 如果tab已存在，则重新加载tab
                $('#tabs').tabs('select', title);  // 激活tab标签页
     
                var currentTab = $('#tabs').tabs('getSelected'); 
                // $('#tabs').tabs('update', {
                //     tab: currentTab,  
                //     options: {
                //         href: url
                //     }
                // });
            
                // 以上方法会导致，再次点击相同标签页的tab，请求的url还是第一次打开那个
                $('#tabs').tabs('close', title);  // 关闭tab标签页
                var iframe='<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
                $('#tabs').tabs('add',{
                    id: nodeID,
                    title: title,
                    content: iframe,
                    closable: true
                });
            } else{ //否则，添加tab
                var iframe='<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
                $('#tabs').tabs('add',{
                    id: nodeID,
                    title: title,
                    content: iframe,
                    closable: true
                });
            }
           
            //为tab标签关联其它操作，比如双击关闭，右键操作等;
        }

        
         // 树形结构上方，项目commbobox onSelect事件处理
        function onSelectComboboxRow(row) {
            projectID = row.id; // 注意：这里必须使用全局变量
            var projectName = row.choice;
            // 请求树
            $('#tree').tree({url:'nodeTree?treeType=SprintTree&projectID=' + projectID});

            // 存储选择的项目ID
            storeProjectChosen('SprintTree', projectID, projectName);
            
            // 关闭所有标签页
            var allTabs = $('#tabs').tabs('tabs');
            for(var i=0; i<allTabs.length; i++) {
                var title = allTabs[i].panel('options').title;
                $('#tabs').tabs('close', title); 
                i--;
            }
        }

    </script>

</head>
<body class="easyui-layout">
    <div data-options="region:'west',split: true" title="迭代管理" style="width: 250px;">
        <div style="position:absolute; left:0px; top:28px; width:94%; border:solid 1px #D2E0F2; display:block; background-color:white;"> <!--94%宽度，拖动时，宽度自适应-->
            <input id="projects" class="easyui-combobox" name="projects" style="width:100%;" data-options="
                valueField: 'id',
                textField: 'choice',
                label: '下拉选择项目',
                panelHeight:'auto',
                labelPosition: 'top',
                onSelect: onSelectComboboxRow
                ">
        </div>
        <div style="margin-top: 50px">
            <ul id="tree" data-options="animate:true,lines:true"></ul> 
        </div>
    </div>
    <div data-options="region:'center',title:'测试任务管理'">
        <div class="easyui-tabs"  id="tabs" data-options="fit:true, border:false, plain:true">
        </div>
    </div>

    <!--定义右键节点时的弹出菜单-->
    <div id="treeNodeMenu" class="easyui-menu" data-options="onClick:treeNodeMenuHandler">
        <div data-options="iconCls:'icon-add'">添加</div>
        <div data-options="iconCls:'icon-remove'">删除</div>
    </div>  
</body>
</html>